<template>
  <div class="bzlxBzjfxs">
    <div id="echartsBzlx">111</div>
    <div id="echartsBzjfxs">222</div>
  </div>
</template>

<script>
export default {
  props: {
    dep_code: {
      type: String,
      default: '450000-00-0000',
      require: true
    }
  },
  data() {
    return {
      echartsBzlx: null,
      echartsBzjfxs: null,
      optionBzlx: {
        grid: {
          top: '15%',
          left: '1%',
          right: '1%',
          bottom: '1%',
          containLabel: true
        },
        title: {
          text: '按编制类型划分',
          textStyle: {
            // height: '15%',
            color: '#fff'
          },
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        // legend: {
        //   orient: 'vertical',
        //   left: 'left'
        // },
        series: [
          {
            name: '编制类型',
            type: 'pie',
            radius: '65%',
            data: [
              { value: 1048, name: '党政群行政编制' },
              { value: 735, name: '公安专项编制' },
              { value: 580, name: '检察院专项编制' },
              { value: 484, name: '法院专项编制' },
              { value: 300, name: '司法专项编制' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
      optionBzjfxs: {
        grid: {
          top: '15%',
          left: '1%',
          right: '1%',
          bottom: '1%',
          containLabel: true
        },
        title: {
          text: '按编制经费形式划分',
          textStyle: {
            // height: '15%',
            color: '#fff'
          },
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        // legend: {
        //   orient: 'vertical',
        //   left: 'left'
        // },
        series: [
          {
            name: '编制经费形式',
            type: 'pie',
            radius: '65%',
            data: [
              { value: 1048, name: '全额拨款' },
              { value: 735, name: '差额补贴' },
              { value: 580, name: '经费自理' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    }
  },

  // watch: {
  //   dep_code(newValue, oldValue) {
  //     if (newValue) {
  //       (this.depcode = newValue), this.getGdbzqk()
  //     }
  //   }
  // },
  mounted() {
    this.initEchartsBzlxBzjfxs()
  },
  destroyed() {
    window.onresize = null
  },
  methods: {
    initEchartsBzlxBzjfxs() {
      this.echartsBzlx = this.$echarts.init(
        document.getElementById('echartsBzlx')
      )
      this.echartsBzlx.setOption(this.optionBzlx)
      this.echartsBzjfxs = this.$echarts.init(
        document.getElementById('echartsBzjfxs')
      )
      this.echartsBzjfxs.setOption(this.optionBzjfxs)
      // 响应式变化
      window.addEventListener('resize', () => this.echartsBzlx.resize(), false)
      window.addEventListener(
        'resize',
        () => this.echartsBzjfxs.resize(),
        false
      )
    }
  }
}
</script>
<style lang="scss" scoped>
.bzlxBzjfxs {
  width: 100%;
  height: 30%;
  // background: rgba(0, 18, 67, 0.4);

  #echartsBzlx {
    width: 50%;
    height: 100%;
    float: left;
  }

  #echartsBzjfxs {
    width: 50%;
    height: 100%;
    float: right;
  }
}
</style>
